body {
    font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
    min-width: 275px;
    min-height: 275px;
    margin: 0;
    color: white;
    overflow: hidden;
}

body > div {
    width: 300%;
    height: 100%;
    position: absolute;
    -webkit-transition: left .5s;
    left: -100%;
}

body > div > div {
    background-size: 100% 100%;
    background-image: none;
    background-color: #eee;
    height: 100%;
    min-height: 275px;
    width: 33.33%;
    position: relative;
    float: left;
}

header, footer, #player section {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px 10px 10px;
}

header {
    padding: 0 0 5px 0;
    cursor: pointer;
}

header div {
    width: 0;
    background: -webkit-linear-gradient(left, #ee7b20, #f00ea0);
    height: 5px;
}

h1 {
    font-size: 1.5em;
    margin: 0;
    color: #139fd0;
}

p {
    margin: 0;
}

a {
    text-decoration: none;
    text-indent: -9999px;
    display: inline-block;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

#doubanlink {
    display: block;
    width: 100%;
    height: 100%;
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

footer > div {
    width: 33.3%;
    float: left;
    text-align: center;
}

#play {
    background: url(../assets/play.png) no-repeat;
}

#next {
    background: url(../assets/next.png) no-repeat;
}

#prev {
    background: url(../assets/prev.png) no-repeat;
}

#repeat {
    background: url(../assets/repeat.png) no-repeat;
}

#repeat.on {
    background: url(../assets/repeati.png) no-repeat;
}

#sound {
    background: url(../assets/sound.png) no-repeat;
}

#love {
    background: url(../assets/love.png) no-repeat;
}

#love.on {
    background: url(../assets/lovei.png) no-repeat;
}

#trash {
    background: url(../assets/trash.png) no-repeat;
}

input[type=range] {
    -webkit-appearance:none;
    width: 100px;
    height: 2px;
    position: absolute;
    left: 154px;
    bottom: 36px;
    background-color: white;
    display: none;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #139fd0;
}


#lrc {
    position: absolute;
    left: 0;
    bottom: 40px;
    padding: 0 5px;
    background-color: rgba(0, 0, 0, 0.5);
}

#message {
    position: absolute;
    right: 0;
    bottom: 40px;
    padding: 0 5px;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    -webkit-transition: opacity 1s;
    color: #f00ea0;
}

#channel p {
    float: left;
    background-color: rgba(0, 0, 0, 0.5);
    line-height: 36px;
    text-align: center;
    width: 89px;
    margin: 2px 0 0 2px;
    box-sizing: border-box;
    border: 1px solid white;
    cursor: pointer;
    -webkit-transition: opacity 0.5s;
    opacity: 0;
}

#channel p:hover, #list p:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: black;
}

#channel p.active, #list p.active {
    background-color: rgba(19, 159, 208, 0.5);
}

#list section{
    position: absolute;
    width: 100%;
    top: 0px;
}

#list p {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
    line-height: 24px;
    margin: 1px 0 0 0;
    box-sizing: border-box;
    cursor: pointer;
    padding: 0 20px;
    width: 100%;
    white-space:nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}


#left, #right {
    z-index: 10;
    position: absolute;
    top: 40%;
    height: 36px;
    width: 18px;
    display: block;
    background: url(../assets/arrow.png) 100% 0 no-repeat;
    display: none;
}

#right {
    right: 0;
    background-position: 0 0;
}



#loading {
    background: url(../assets/loading.gif) 125px 125px no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.75);
    z-index: -1;
    display: none;
}

#oauth, #error {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
    padding: 100px 0;
    -webkit-transition: top .5s;
    z-index: 20;
}

#oauth p, #error p {
    margin: 0 auto;
}

#oauth a {
    text-indent: 0;
    padding: 2px 5px;
    height: auto;
    margin-top: 10px;
    color: white;
    border: 1px solid white;
}

#oauth a:hover {
    background-color: white;
    color: black;
}

#popup {
    position: absolute;
    bottom: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background-image: url(../assets/popup.png);
    display: none;
}
